<div class="row">
  <div class="col-12">
    <h2 class="mb-4">系统设置</h2>
  </div>
</div>

<div class="row">
  <div class="col-md-3">
    <div class="card">
      <div class="card-header">
        <h6 class="mb-0">设置菜单</h6>
      </div>
      <div class="list-group list-group-flush">
        <a href="#" class="list-group-item list-group-item-action"
           ng-class="{ active: $ctrl.activeTab === 'profile' }"
           ng-click="$ctrl.setActiveTab('profile')">
          <i class="fas fa-user me-2"></i>个人资料
        </a>
        <a href="#" class="list-group-item list-group-item-action"
           ng-class="{ active: $ctrl.activeTab === 'password' }"
           ng-click="$ctrl.setActiveTab('password')">
          <i class="fas fa-lock me-2"></i>修改密码
        </a>
        <a href="#" class="list-group-item list-group-item-action"
           ng-class="{ active: $ctrl.activeTab === 'notifications' }"
           ng-click="$ctrl.setActiveTab('notifications')">
          <i class="fas fa-bell me-2"></i>通知设置
        </a>
        <a href="#" class="list-group-item list-group-item-action"
           ng-class="{ active: $ctrl.activeTab === 'system' }"
           ng-click="$ctrl.setActiveTab('system')">
          <i class="fas fa-cogs me-2"></i>系统设置
        </a>
        <a href="#" class="list-group-item list-group-item-action"
           ng-class="{ active: $ctrl.activeTab === 'lookups' }"
           ng-click="$ctrl.setActiveTab('lookups')"
           ng-if="$ctrl.hasRole(['administrator'])">
          <i class="fas fa-list-alt me-2"></i>字典配置
        </a>
      </div>
    </div>
  </div>

  <div class="col-md-9">
    <!-- 个人资料 -->
    <div class="card" ng-show="$ctrl.activeTab === 'profile'">
      <div class="card-header">
        <h5 class="mb-0">个人资料</h5>
      </div>
      <div class="card-body">
        <form name="$ctrl.profileForm" ng-submit="$ctrl.saveProfile()" novalidate>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">姓名 <span class="text-danger">*</span></label>
              <input type="text" class="form-control" ng-model="$ctrl.userProfile.name" required>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">邮箱 <span class="text-danger">*</span></label>
              <input type="email" class="form-control" ng-model="$ctrl.userProfile.email" required>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">电话</label>
              <input type="tel" class="form-control" ng-model="$ctrl.userProfile.phone">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">部门</label>
              <input type="text" class="form-control" ng-model="$ctrl.userProfile.department">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">角色</label>
              <select class="form-control" ng-model="$ctrl.userProfile.role" ui-select2="{placeholder: '选择角色', allowClear: false}">
                <option value="user">普通用户</option>
                <option value="operator">操作员</option>
                <option value="administrator">管理员</option>
              </select>
            </div>
          </div>
          <button type="submit" class="btn btn-primary">保存个人资料</button>
        </form>
      </div>
    </div>

    <!-- 修改密码 -->
    <div class="card" ng-show="$ctrl.activeTab === 'password'">
      <div class="card-header">
        <h5 class="mb-0">修改密码</h5>
      </div>
      <div class="card-body">
        <form name="$ctrl.passwordForm" ng-submit="$ctrl.changePassword()" novalidate>
          <div class="mb-3">
            <label class="form-label">原密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" ng-model="$ctrl.oldPassword" required>
          </div>
          <div class="mb-3">
            <label class="form-label">新密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" ng-model="$ctrl.newPassword" 
                   minlength="6" required>
            <div class="form-text">密码至少6位字符</div>
          </div>
          <div class="mb-3">
            <label class="form-label">确认新密码 <span class="text-danger">*</span></label>
            <input type="password" class="form-control" ng-model="$ctrl.confirmPassword" required>
          </div>
          <button type="submit" class="btn btn-primary">修改密码</button>
        </form>
      </div>
    </div>

    <!-- 通知设置 -->
    <div class="card" ng-show="$ctrl.activeTab === 'notifications'">
      <div class="card-header">
        <h5 class="mb-0">通知设置</h5>
      </div>
      <div class="card-body">
        <form ng-submit="$ctrl.saveNotificationSettings()">
          <h6 class="mb-3">邮件通知</h6>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" id="emailNewTicket"
                   ng-model="$ctrl.notificationSettings.emailNewTicket">
            <label class="form-check-label" for="emailNewTicket">新工单通知</label>
          </div>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" id="emailTicketUpdate"
                   ng-model="$ctrl.notificationSettings.emailTicketUpdate">
            <label class="form-check-label" for="emailTicketUpdate">工单更新通知</label>
          </div>
          <div class="form-check mb-4">
            <input type="checkbox" class="form-check-input" id="emailTicketComplete"
                   ng-model="$ctrl.notificationSettings.emailTicketComplete">
            <label class="form-check-label" for="emailTicketComplete">工单完成通知</label>
          </div>

          <h6 class="mb-3">其他通知</h6>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" id="pushNotifications"
                   ng-model="$ctrl.notificationSettings.pushNotifications">
            <label class="form-check-label" for="pushNotifications">浏览器推送通知</label>
          </div>
          <div class="form-check mb-4">
            <input type="checkbox" class="form-check-input" id="dailyDigest"
                   ng-model="$ctrl.notificationSettings.dailyDigest">
            <label class="form-check-label" for="dailyDigest">每日摘要邮件</label>
          </div>

          <button type="submit" class="btn btn-primary">保存通知设置</button>
        </form>
      </div>
    </div>

    <!-- 系统设置 -->
    <div class="card" ng-show="$ctrl.activeTab === 'system'">
      <div class="card-header">
        <h5 class="mb-0">系统设置</h5>
      </div>
      <div class="card-body">
        <form name="$ctrl.systemForm" ng-submit="$ctrl.saveSystemSettings()" novalidate>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">网站名称</label>
              <input type="text" class="form-control" ng-model="$ctrl.systemSettings.siteName">
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">默认语言</label>
              <select class="form-control" ng-model="$ctrl.systemSettings.defaultLanguage" ui-select2="{placeholder: '选择语言', allowClear: false}">
                <option value="zh-CN">中文简体</option>
                <option value="zh-TW">中文繁体</option>
                <option value="en-US">English</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">时区</label>
              <select class="form-control" ng-model="$ctrl.systemSettings.timezone" ui-select2="{placeholder: '选择时区', allowClear: false}">
                <option value="Asia/Shanghai">中国标准时间</option>
                <option value="America/New_York">美国东部时间</option>
                <option value="Europe/London">格林尼治标准时间</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">文件上传限制 (MB)</label>
              <input type="number" class="form-control" min="1" max="100"
                     ng-model="$ctrl.systemSettings.maxFileSize">
            </div>
          </div>

          <h6 class="mb-3">功能设置</h6>
          <div class="form-check mb-2">
            <input type="checkbox" class="form-check-input" id="emailNotifications"
                   ng-model="$ctrl.systemSettings.emailNotifications">
            <label class="form-check-label" for="emailNotifications">启用邮件通知</label>
          </div>
          <div class="form-check mb-4">
            <input type="checkbox" class="form-check-input" id="autoAssign"
                   ng-model="$ctrl.systemSettings.autoAssign">
            <label class="form-check-label" for="autoAssign">自动分配工单</label>
          </div>

          <button type="submit" class="btn btn-primary">保存系统设置</button>
        </form>
      </div>
    </div>

    <!-- 字典配置 -->
    <div class="card" ng-show="$ctrl.activeTab === 'lookups'">
      <div class="card-header">
        <h5 class="mb-0 d-flex justify-content-between align-items-center">
          字典配置管理
          <div>
            <button type="button" class="btn btn-primary btn-sm me-2" ng-click="$ctrl.showCreateTypeModal()">
              <i class="fas fa-plus me-1"></i>新增字典类型
            </button>
            <button type="button" class="btn btn-success btn-sm" ng-click="$ctrl.showCreateItemModal()">
              <i class="fas fa-plus me-1"></i>新增字典项
            </button>
          </div>
        </h5>
      </div>
      <div class="card-body">
        <!-- 搜索和筛选 -->
        <div class="row mb-3">
          <div class="col-md-4">
            <input type="text" class="form-control" placeholder="搜索字典类型或项目..." 
                   ng-model="$ctrl.lookupSearch" ng-change="$ctrl.searchLookups()">
          </div>
          <div class="col-md-3">
            <select class="form-control" ng-model="$ctrl.selectedLookupType" 
                    ng-change="$ctrl.filterByType()" ui-select2="{placeholder: '选择字典类型', allowClear: true}">
              <option value="">全部类型</option>
              <option ng-repeat="type in $ctrl.lookupTypes" value="{{ type.id }}">{{ type.name }}</option>
            </select>
          </div>
          <div class="col-md-2">
            <select class="form-control" ng-model="$ctrl.lookupStatusFilter" 
                    ng-change="$ctrl.filterByStatus()">
              <option value="">全部状态</option>
              <option value="1">启用</option>
              <option value="0">禁用</option>
            </select>
          </div>
          <div class="col-md-3 text-end">
            <button type="button" class="btn btn-outline-secondary" ng-click="$ctrl.resetLookupFilters()">
              <i class="fas fa-refresh me-1"></i>重置
            </button>
          </div>
        </div>

        <!-- 字典类型和字典项列表 -->
        <div class="row">
          <!-- 字典类型列表 -->
          <div class="col-md-5">
            <h6 class="border-bottom pb-2 mb-3">字典类型列表</h6>
            <div class="list-group" style="max-height: 500px; overflow-y: auto;">
              <div class="list-group-item list-group-item-action" 
                   ng-repeat="type in $ctrl.lookupTypes" 
                   ng-class="{ active: type.id === $ctrl.selectedTypeId }"
                   ng-click="$ctrl.selectType(type)">
                <div class="d-flex justify-content-between align-items-center">
                  <div>
                    <h6 class="mb-1">{{ type.name }}</h6>
                    <p class="mb-1 small text-muted">{{ type.code }}</p>
                    <small class="text-muted">{{ type.description || '暂无描述' }}</small>
                  </div>
                  <div>
                    <span class="badge" ng-class="type.status ? 'bg-success' : 'bg-secondary'">
                      {{ type.status ? '启用' : '禁用' }}
                    </span>
                    <small class="text-muted d-block">{{ type.item_count || 0 }} 个项目</small>
                  </div>
                </div>
                <div class="mt-2" ng-if="!type.is_system">
                  <button type="button" class="btn btn-outline-primary btn-sm me-1" 
                          ng-click="$ctrl.editType(type); $event.stopPropagation()">
                    <i class="fas fa-edit"></i>
                  </button>
                  <button type="button" class="btn btn-outline-danger btn-sm" 
                          ng-click="$ctrl.deleteType(type); $event.stopPropagation()"
                          ng-if="type.item_count === 0">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
                <div class="mt-2" ng-if="type.is_system">
                  <small class="text-warning"><i class="fas fa-lock me-1"></i>系统预置</small>
                </div>
              </div>
              <div class="list-group-item text-center text-muted" ng-if="$ctrl.lookupTypes.length === 0">
                <i class="fas fa-info-circle me-2"></i>暂无字典类型
              </div>
            </div>
          </div>

          <!-- 字典项列表 -->
          <div class="col-md-7">
            <h6 class="border-bottom pb-2 mb-3">
              字典项列表
              <span class="text-muted" ng-if="$ctrl.selectedTypeName">- {{ $ctrl.selectedTypeName }}</span>
            </h6>
            <div ng-if="$ctrl.selectedTypeId">
              <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                <table class="table table-sm table-hover">
                  <thead class="table-light sticky-top">
                    <tr>
                      <th>代码</th>
                      <th>名称</th>
                      <th>值</th>
                      <th>状态</th>
                      <th>排序</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr ng-repeat="item in $ctrl.lookupItems track by item.id"
                        ng-class="{'table-secondary': !item.status}">
                      <td>
                        <code>{{ item.code }}</code>
                        <span class="ms-1" ng-if="item.level > 1">
                          <i class="fas fa-level-up-alt text-muted" 
                             ng-repeat="i in $ctrl.range(item.level - 1) track by $index"></i>
                        </span>
                      </td>
                      <td>
                        {{ item.name }}
                        <span class="text-muted small d-block" ng-if="item.parent_name">
                          ↳ {{ item.parent_name }}
                        </span>
                      </td>
                      <td>
                        <span class="text-muted small" ng-if="!item.value">-</span>
                        <span ng-if="item.value">{{ item.value }}</span>
                      </td>
                      <td>
                        <span class="badge" ng-class="item.status ? 'bg-success' : 'bg-secondary'">
                          {{ item.status ? '启用' : '禁用' }}
                        </span>
                      </td>
                      <td>{{ item.sort_order }}</td>
                      <td>
                        <div class="btn-group btn-group-sm">
                          <button type="button" class="btn btn-outline-primary" 
                                  ng-click="$ctrl.editItem(item)">
                            <i class="fas fa-edit"></i>
                          </button>
                          <button type="button" class="btn btn-outline-danger" 
                                  ng-click="$ctrl.deleteItem(item)"
                                  ng-if="!item.is_system">
                            <i class="fas fa-trash"></i>
                          </button>
                        </div>
                        <div ng-if="item.is_system">
                          <small class="text-warning"><i class="fas fa-lock"></i></small>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <div class="text-center text-muted py-3" ng-if="$ctrl.lookupItems.length === 0">
                  <i class="fas fa-info-circle me-2"></i>该字典类型下暂无项目
                </div>
              </div>
            </div>
            <div ng-if="!$ctrl.selectedTypeId" class="text-center text-muted py-5">
              <i class="fas fa-hand-point-left me-2"></i>请选择左侧字典类型查看其下的字典项
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 字典类型创建/编辑模态框 -->
<div class="modal fade" id="lookupTypeModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ $ctrl.lookupTypeForm.id ? '编辑字典类型' : '新增字典类型' }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form name="$ctrl.typeForm" novalidate>
          <div class="mb-3">
            <label class="form-label">类型代码 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" ng-model="$ctrl.lookupTypeForm.code" 
                   ng-disabled="$ctrl.lookupTypeForm.is_system" required>
            <div class="form-text">用于程序调用的唯一标识，建议使用英文和下划线</div>
          </div>
          <div class="mb-3">
            <label class="form-label">类型名称 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" ng-model="$ctrl.lookupTypeForm.name" 
                   ng-disabled="$ctrl.lookupTypeForm.is_system" required>
          </div>
          <div class="mb-3">
            <label class="form-label">描述</label>
            <textarea class="form-control" rows="3" ng-model="$ctrl.lookupTypeForm.description"></textarea>
          </div>
          <div class="row">
            <div class="col-md-6">
              <label class="form-label">排序</label>
              <input type="number" class="form-control" ng-model="$ctrl.lookupTypeForm.sort_order" min="0">
            </div>
            <div class="col-md-6">
              <label class="form-label">状态</label>
              <select class="form-control" ng-model="$ctrl.lookupTypeForm.status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
              </select>
            </div>
          </div>
          <div class="mt-3" ng-if="$ctrl.lookupTypeForm.is_system">
            <div class="alert alert-warning">
              <i class="fas fa-info-circle me-2"></i>
              系统预置字典类型，代码和名称不允许修改
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" ng-click="$ctrl.saveLookupType()" 
                ng-disabled="$ctrl.typeForm.$invalid">保存</button>
      </div>
    </div>
  </div>
</div>

<!-- 字典项创建/编辑模态框 -->
<div class="modal fade" id="lookupItemModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ $ctrl.lookupItemForm.id ? '编辑字典项' : '新增字典项' }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form name="$ctrl.itemForm" novalidate>
          <div class="mb-3">
            <label class="form-label">字典类型 <span class="text-danger">*</span></label>
            <select class="form-control" ng-model="$ctrl.lookupItemForm.type_id" required
                    ui-select2="{placeholder: '选择字典类型', allowClear: false}"
                    ng-disabled="$ctrl.lookupItemForm.id">
              <option ng-repeat="type in $ctrl.lookupTypes" value="{{ type.id }}">{{ type.name }}</option>
            </select>
          </div>
          <div class="mb-3" ng-if="$ctrl.getParentOptions().length > 0">
            <label class="form-label">父级项目</label>
            <select class="form-control" ng-model="$ctrl.lookupItemForm.parent_id"
                    ui-select2="{placeholder: '选择父级项目（可选）', allowClear: true}">
              <option value="">无父级</option>
              <option ng-repeat="parent in $ctrl.getParentOptions()" value="{{ parent.id }}">{{ parent.name }}</option>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">项目代码 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" ng-model="$ctrl.lookupItemForm.code" 
                   ng-disabled="$ctrl.lookupItemForm.is_system" required>
            <div class="form-text">用于程序调用的唯一标识</div>
          </div>
          <div class="mb-3">
            <label class="form-label">项目名称 <span class="text-danger">*</span></label>
            <input type="text" class="form-control" ng-model="$ctrl.lookupItemForm.name" 
                   ng-disabled="$ctrl.lookupItemForm.is_system" required>
          </div>
          <div class="mb-3">
            <label class="form-label">项目值</label>
            <input type="text" class="form-control" ng-model="$ctrl.lookupItemForm.value">
            <div class="form-text">用于存储和传递的实际值</div>
          </div>
          <div class="mb-3">
            <label class="form-label">描述</label>
            <textarea class="form-control" rows="3" ng-model="$ctrl.lookupItemForm.description"></textarea>
          </div>
          <div class="row">
            <div class="col-md-6">
              <label class="form-label">排序</label>
              <input type="number" class="form-control" ng-model="$ctrl.lookupItemForm.sort_order" min="0">
            </div>
            <div class="col-md-6">
              <label class="form-label">状态</label>
              <select class="form-control" ng-model="$ctrl.lookupItemForm.status">
                <option value="1">启用</option>
                <option value="0">禁用</option>
              </select>
            </div>
          </div>
          <div class="mt-3" ng-if="$ctrl.lookupItemForm.is_system">
            <div class="alert alert-warning">
              <i class="fas fa-info-circle me-2"></i>
              系统预置字典项，代码和名称不允许修改
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" ng-click="$ctrl.saveLookupItem()" 
                ng-disabled="$ctrl.itemForm.$invalid">保存</button>
      </div>
    </div>
  </div>
</div>